<template>
    <view class="content">
        <view class="box" v-for="(nitem, nindex) in data" :key="nindex">
			<view class="title">{{nitem.name}}</view>
			<view class="item" v-for="(el, ind) in nitem.item" :key="ind" @click="open(el)">
				<view class="i-top">
					<view class="i-tit">{{el.title}}</view>
					<u-icon name="info-circle" color="#8290b0" size="36"></u-icon>
				</view>
				<view class="sub">{{el.content}}</view>
			</view>
		</view>
		
		<view class="footer-tip">
			由于各地区体检设备不同，造成个别微小项目略有差异，详情可在预约界面查看或咨询客服人员。
		</view>
		
		<u-mask :show="show" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <view class="pop-up2">
		                <view class="pop-tit">
							指标意义
						</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">{{ item.describe }}</view>
							</scroll-view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
				data: [],
				item: {},
            };
        },
        onLoad() {
            this.getData()
        },
        methods: {
            open(el) {
				this.item = el
				this.show = true
			},
			
			getData() {
				this.$ajax('get_items', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.footer-tip{
		font-size: 24rpx;
		color: #fff;
		padding: 20rpx 30rpx;
		background: rgba(0, 0, 0, .6);
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
    page{
        background-color: #fff;
    }
	.content{
		padding-bottom: 70px;
	}
	.box{
		padding-bottom: 25rpx;
	}
	.title{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 16rpx;
		background-color: #01b6bc;
	}
	.item{
		margin: 0 20rpx;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.i-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.i-tit{
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		word-break: break-all;
		white-space: pre-line;
		padding-right: 15rpx;
	}
	.sub{
		font-size: 24rpx;
		color: #818181;
		word-break: break-all;
		white-space: pre-line;
		padding-top: 10rpx;
	}
	
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box2 {
	    width: 616rpx;
		height: 670rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-bg{
		width: 616rpx;
		height: 293rpx;
	}
	.pop-up {
	    width: 616rpx;
		height: 670rpx;
	    padding: 50rpx 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.pop-up2{
		width: 616rpx;
		// height: 670rpx;
		padding: 50rpx 40rpx;
	}
	.jswz{
		width: 616rpx;
		height: 250rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	.pop-btns{
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pop-btns>view{
		width: 236rpx;
		height: 78rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 78rpx;
	}
	.pop-b-l{
		color: #5c5c5c;
		background-color: #f4f4f4;
	}
	.pop-b-r{
		color: #fff;
		background-color: #00b5bc;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}

</style>
